import { useEffect, useState } from "react";

export default function NavigateProgress() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    let timer: Timer;
    function step() {
      setProgress((p) => p + (100 - p) * 0.1);
      timer = setTimeout(step, 800);
    }
    step();
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <div
      className="h-1 bg-blue-500 transition-all duration-300"
      style={{
        width: `${progress}%`,
      }}
    />
  );
}
